<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="timestamps"
        value-format="timestamp"
        type="datetimerange"
        @change="change"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="left"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近两个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上半年",
            onClick(picker) {
              const today = new Date();
              let yesr = today.getFullYear();
              const start = new Date(yesr, 0, 1, 0, 0);
              const end = new Date(yesr, 5, 30, 12, 59);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "下半年",
            onClick(picker) {
              const today = new Date();
              let yesr = today.getFullYear();
              const start = new Date(yesr, 6, 1, 0, 0);
              const end = new Date(yesr, 11, 31, 12, 59);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "今年",
            onClick(picker) {
              const today = new Date();
              let yesr = today.getFullYear();
              const start = new Date(yesr, 0, 1, 0, 0);
              const end = new Date(yesr, 11, 31, 12, 59);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      timestamps: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 初始化的搜索时间为最近一周
     */
    init() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.timestamps.push(start.getTime())
      this.timestamps.push(end.getTime())
      //把默认的搜索时间戳传回父组件
      this.change()
    },

    /**
     * 时间控件发生改变的事件
     */
    change() {
      this.$emit("change", this.timestamps);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>